<template>
	<view class="container">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">健康膳食助手</text>
		</view>

		<!-- 聊天记录区域 -->
		<scroll-view class="chat-list" scroll-y="true" :scroll-top="scrollTop" :scroll-into-view="scrollToView">
			<view v-for="(item, index) in chatList" :key="index"
				:class="['chat-item', item.type === 'user' ? 'chat-right' : 'chat-left']" :id="'msg-' + index">
<!-- 				<image v-if="item.type === 'ai'" class="avatar" src="/static/ai-avatar.png"></image> -->
				<view class="message" :class="item.type === 'user' ? 'user-message' : 'ai-message'">
					{{ item.content }}
				</view>
			</view>
			<view id="msg-bottom"></view>
		</scroll-view>

		<!-- 快捷问题区域 -->
		<scroll-view class="quick-questions" scroll-x="true">
			<view v-for="(question, index) in quickQuestions" :key="index" class="question-item"
				@tap="quickAsk(question)">
				{{ question }}
			</view>
		</scroll-view>

		<!-- 输入区域 -->
		<view class="input-box">
			<input class="input" v-model="inputMessage" placeholder="请输入您的问题" @confirm="sendMessage"
				confirm-type="send" />
			<button class="send-btn" @tap="sendMessage">发送</button>
		</view>
	</view>
</template>

<script>
	import a from './qaData'
	export default {
		data() {
			return {
				chatList: [],
				inputMessage: '',
				scrollTop: 0,
				scrollToView: '',
				quickQuestions: a.quickQuestions,
				qaMap: a.qaData,
				initialQaMap:a.initialQaMap
			}
		},
		mounted() {
			this.chatList.push({
				type: 'ai',
				content: '您好！我是健康饮食助手，可以为您推荐：\n1. 日常营养搭配\n2. 特殊功能性饮食\n3. 各类人群膳食\n4. 养生食疗方案\n\n请问需要什么帮助？'
			})
		},
		methods: {
			quickAsk(question) {
				this.inputMessage = question
				this.sendMessage()
			},

			sendMessage() {
				if (!this.inputMessage.trim()) return

				const userQuestion = this.inputMessage.trim()

				this.chatList.push({
					type: 'user',
					content: userQuestion
				})

				const answer = this.getAnswer(userQuestion)

				setTimeout(() => {
					this.chatList.push({
						type: 'ai',
						content: answer
					})

					this.$nextTick(() => {
						this.scrollToBottom()
					})
				}, 500)

				this.inputMessage = ''
				this.scrollToBottom()
			},
    getAnswer(question) {
      // 先检查是否是初始选项的数字
      if (this.initialQaMap[question]) {
        return this.initialQaMap[question]
      }
      
      // // 再检查是否是快捷问题的数字
      // if (this.numberMap[question]) {
      //   question = this.numberMap[question]
      // }
      
      if (this.qaMap[question]) {
        return this.qaMap[question]
      }
      
      return `抱歉，我不太理解您的问题。您可以：

1. 输入数字1-4选择主要类别
2. 点击上方快捷问题
3. 输入具体的饮食相关问题

需要帮助请告诉我！`
    },
// 			getAnswer(question) {
// 				if (this.qaMap[question]) {
// 					return this.qaMap[question]
// 				}

// 				return `关于"${question}"，您可以：

// 1. 点击上方快捷问题获取推荐
// 2. 询问具体食材的营养价值
// 3. 咨询特定功效的食谱
// 4. 了解特定人群的饮食建议

// 💡 您还可以这样问：
// • xx食材怎么搭配最营养？
// • xx人群适合吃什么？
// • 想要xx功效应该怎么吃？`
// 			},

			scrollToBottom() {
				this.scrollToView = 'msg-bottom'
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.header {
		background-color: #4CAF50;
		padding: 20rpx;
		text-align: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}

	.title {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
	}

	.chat-list {
		flex: 1;
		padding: 20rpx;
		box-sizing: border-box;
		padding-bottom: 240rpx;
		padding-top: 100rpx;
	}

	.chat-item {
		width: 100%;
		margin-bottom: 30rpx;
		display: flex;
		clear: both;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.chat-left {
		justify-content: flex-start;
	}

	.chat-right {
		justify-content: flex-end;
	}

	.message {
		max-width: 70%;
		padding: 20rpx 24rpx;
		border-radius: 10rpx;
		word-break: break-all;
		font-size: 28rpx;
		line-height: 1.5;
	}

	.user-message {
		background-color: #4CAF50;
		color: #fff;
		border-radius: 20rpx 4rpx 20rpx 20rpx;
	}

	.ai-message {
		background-color: #fff;
		border-radius: 4rpx 20rpx 20rpx 20rpx;
	}

	.quick-questions {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		white-space: nowrap;
	}

	.question-item {
		display: inline-block;
		margin-right: 20rpx;
		background-color: #f0f0f0;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #333;
	}

	.question-item:active {
		background-color: #e0e0e0;
	}

	.input-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eee;
		padding-bottom:2px;
	}

	.input {
		flex: 1;
		height: 72rpx;
		line-height: 72rpx;
		padding: 0 30rpx;
		border: 1rpx solid #ddd;
		border-radius: 36rpx;
		margin-right: 20rpx;
		font-size: 28rpx;
		background-color: #f8f8f8;
	}

	.send-btn {
		width: 120rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background-color: #4CAF50;
		color: #fff;
		border-radius: 36rpx;
		font-size: 28rpx;
		padding: 0;
	}

	.send-btn::after {
		border: none;
	}
</style>